/** @type {HTMLCanvasElement} */

const canvas = document.getElementById("canvas");
if (canvas.getContext) {
  let ctx = canvas.getContext("2d");
  //绘制三角形
  //   ctx.beginPath();
  //   ctx.moveTo(50, 50);
  //   ctx.lineTo(100, 100);
  //   ctx.lineTo(100, 50);
  //   ctx.lineTo(50, 50);
  //   ctx.stroke();

  //绘制矩形
  //   ctx.strokeRect(50, 50, 50, 50);
  //   ctx.fillRect(50, 50, 50, 50);
  //   ctx.clearRect(75, 75, 25, 25);

  //绘制圆形
  //   ctx.beginPath();
  //   ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
  //   ctx.stroke();

  //填充圆形
  //   ctx.beginPath();
  //   ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
  //   ctx.fill();

  //绘制椭圆
  //   ctx.beginPath();
  //   ctx.ellipse(150, 150, 100, 50, Math.PI, 0, Math.PI * 2);
  //   ctx.stroke();

  //绘制二次贝塞尔曲线
  // ctx.beginPath();
  // ctx.moveTo(50, 50);
  // ctx.quadraticCurveTo(100, 200, 350, 50);
  // ctx.stroke();

  //绘制三次贝塞尔曲线
  // ctx.beginPath();
  // ctx.moveTo(50, 200);
  // ctx.bezierCurveTo(150, 50, 250, 350, 350, 200);
  // ctx.stroke();

  //设置线条宽度，端点样式
  // ctx.beginPath();
  // ctx.lineWidth = 10;
  // ctx.lineCap = "round";
  // ctx.lineJoin = "round";
  // ctx.moveTo(50, 150);
  // ctx.lineTo(100, 100);
  // ctx.lineTo(150, 150);
  // ctx.lineTo(200, 100);
  // ctx.lineTo(250, 150);
  // ctx.stroke();

  //绘制字体
  // ctx.font = "50px 微软雅黑";
  // ctx.strokeText("canvas", 50, 50);
  // ctx.fillText("canvas", 50, 50);

  //绘制图片
  // const img = new Image();
  // img.src =
  //   "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191212%2F556cc408058d4c64a46468761406afe6.png&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660103116&t=8dd0c641e1e1890fa65ee80dfa428d34";
  // img.onload = function () {
  //   ctx.drawImage(img, 100, 100, 300, 300, 0, 0, 500, 500);
  // };

  //保存与恢复
  // ctx.fillStyle = "gray";
  // ctx.fillRect(10, 10, 200, 30);
  // ctx.save();
  // ctx.fillStyle = "red";
  // ctx.fillRect(10, 50, 200, 30);
  // ctx.restore();
  // ctx.fillRect(10, 90, 200, 30);
}
